import React, { PureComponent } from 'react'
import {
    CateCnotainer,
    SlideContainer
}from './StyledCategory'
export default class Category extends PureComponent {
    state = {
        dir:'left'
    }
    render() {
        return (
            <CateCnotainer>
                <header>
                    <SlideContainer className={this.state.dir}>
                        <li onClick={()=>this.handleChange('left')} className={this.state.dir==='left'?'active':''}>分类</li>
                        <li onClick={()=>this.handleChange('right')} className={this.state.dir==='right'?'active':''}>食材</li>
                    </SlideContainer>
                </header>
            </CateCnotainer>
        )
    }
    handleChange(dir){
       this.setState({
           dir
       })
    }
}
